import { useEffect } from 'react';
import { fetchGetStoryBuySlice } from '../../store/buyStory/buyStory.action';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import styles from './story.module.scss';
import { StoriesBuy } from '../../components/storiesBuy/storiesBuy';
import Button from '../../components/button/button';
import { useNavigate } from 'react-router-dom';

export const Story = () => {
	const dispatch = useAppDispatch();
	const navigate = useNavigate();
	const {loading, storyBuy, success } = useAppSelector(state => state.buyStory);
	useEffect(() => {
		dispatch(fetchGetStoryBuySlice());
	}, [success]);
	console.log('storyBuy', storyBuy);
	return (
		<div className={styles.container}>
			{loading === false ? 
				<>
					{storyBuy.length > 0 ?
						<div className={styles.item}>{storyBuy.map(item => <StoriesBuy key={item.id} allPurchases={item} />)}</div> 
						: 
						<div className={styles.withoutBuy}>
							<p>Покупок не было !</p>
							<Button onClick={() => navigate('/')}>К покупкам</Button>
						</div>
					}
				</>
				: 
				<>Загруза</>}
		</div>
	);
};
